<template>
    <view class="container">
        <!-- 顶部导航栏 -->
        <view class="header">
            <view class="back-button" @click="goBack">
                <text class="back-icon">←</text>
            </view>
            <text class="header-title">志愿服务</text>
        </view>

        <!-- 主要内容区域 -->
        <view class="content">
            <!-- 顶部介绍 -->
            <view class="intro-section">
<<<<<<< HEAD
                <image class="intro-image" src="/static/volunteer-banner.png" mode="aspectFill"></image>
                <view class="intro-overlay1">
=======
                <image class="intro-image" src="/static/volunteer-banner.jpg" mode="aspectFill"></image>
                <view class="intro-overlay">
>>>>>>> 73359ff (更新头像)
                    <text class="intro-title">志愿服务</text>
                    <text class="intro-desc">用爱心和行动，传递温暖与希望</text>
                </view>
            </view>

            <!-- 服务分类 -->
<<<<<<< HEAD
            <!-- <view class="category-section">
=======
            <view class="category-section">
>>>>>>> 73359ff (更新头像)
                <view class="section-title">
                    <text class="title-text">服务类型</text>
                </view>
                <view class="category-list">
                    <view class="category-item" v-for="(category, index) in categories" :key="index"
                        @click="filterByCategory(category.name)">
                        <view class="category-icon-container" :style="{ background: category.bgColor }">
                            <text class="category-icon">{{ category.icon }}</text>
                        </view>
                        <text class="category-name">{{ category.name }}</text>
                    </view>
                </view>
<<<<<<< HEAD
            </view> -->
=======
            </view>
>>>>>>> 73359ff (更新头像)

            <!-- 志愿活动列表 -->
            <view class="section-title list-title">
                <text class="title-text">志愿活动</text>
                <view class="filter-container">
                    <picker mode="selector" :range="sortOptions" @change="handleSortChange">
<<<<<<< HEAD
                        <!-- <view class="filter-button">
                            <text class="filter-text">{{ currentSort }}</text>
                            <text class="filter-icon">▼</text>
                        </view> -->
=======
                        <view class="filter-button">
                            <text class="filter-text">{{ currentSort }}</text>
                            <text class="filter-icon">▼</text>
                        </view>
>>>>>>> 73359ff (更新头像)
                    </picker>
                </view>
            </view>

            <view class="volunteer-list">
                <view class="volunteer-item" v-for="(activity, index) in volunteerActivities" :key="index"
                @click="openExternalLink(activity.url)">
                    <image class="volunteer-image" :src="activity.image" mode="aspectFill"></image>
                    <view class="volunteer-info">
                        <text class="volunteer-title">{{ activity.title }}</text>
                        <view class="volunteer-meta">
                            <view class="meta-item">
                                <text class="meta-icon">🕒</text>
                                <text class="meta-text">{{ activity.time }}</text>
                            </view>
                            <view class="meta-item">
                                <text class="meta-icon">📍</text>
                                <text class="meta-text">{{ activity.location }}</text>
                            </view>
                            <!-- <view class="meta-item">
                                <text class="meta-icon">👥</text>
                                <text class="meta-text">{{ activity.participants }}人已报名</text>
                            </view> -->
                        </view>
                        <!-- <view class="volunteer-footer">
                            <text class="volunteer-status" :class="activity.statusClass">{{ activity.status }}</text>
                            <text class="volunteer-apply">立即报名</text>
                        </view> -->
                    </view>
                </view>
            </view>

            <!-- 加载更多 -->
            <view class="load-more" @click="loadMore">
                <text class="load-more-text">{{ isLoading ? '加载中...' : '加载更多' }}</text>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            categories: [
                { name: '关爱老人', icon: '👴', bgColor: 'linear-gradient(135deg, #FF9A9E 0%, #FAD0C4 100%)' },
                { name: '儿童教育', icon: '👶', bgColor: 'linear-gradient(135deg, #A1C4FD 0%, #C2E9FB 100%)' },
                { name: '环境保护', icon: '🌱', bgColor: 'linear-gradient(135deg, #81FBB8 0%, #28C76F 100%)' },
                { name: '医疗救助', icon: '🏥', bgColor: 'linear-gradient(135deg, #FF9A9E 0%, #FECFEF 100%)' },
                { name: '社区服务', icon: '🏘️', bgColor: 'linear-gradient(135deg, #FCCB90 0%, #D57EEB 100%)' },
                { name: '全部', icon: '🔍', bgColor: 'linear-gradient(135deg, #E0C3FC 0%, #8EC5FC 100%)' }
            ],
            sortOptions: ['最新发布', '热门活动', '即将开始'],
            currentSort: '最新发布',
            volunteerActivities: [
                // {
                //     id: 1,
                //     title: '社区老人关爱行动',
                //     time: '2023-12-15 09:00-12:00',
                //     location: '北京市朝阳区敬老院',
                //     participants: 28,
                //     status: '招募中',
                //     statusClass: 'status-recruiting',
                //     image: '/static/volunteer-elderly.jpg',
                //     url: 'http://www.dcdxsw.com/shsj/shsjhd/73943.html'
                // },
                // {
                //     id: 2,
                //     title: '儿童阅读志愿者',
                //     time: '2023-12-20 14:00-16:30',
                //     location: '上海市浦东新区希望小学',
                //     participants: 15,
                //     status: '即将开始',
                //     statusClass: 'status-upcoming',
                //     image: '/static/volunteer-children.jpg',
                //     url: 'http://www.dcdxsw.com/shsj/shsjhd/73943.html'
                // },
                // {
                //     id: 3,
                //     title: '城市公园环保行动',
                //     time: '2023-12-23 08:30-11:30',
                //     location: '广州市天河公园',
                //     participants: 42,
                //     status: '招募中',
                //     statusClass: 'status-recruiting',
                //     image: '/static/volunteer-environment.jpg',
                //     url: 'http://www.dcdxsw.com/shsj/shsjhd/73943.html'
                // },
                // {
                //     id: 4,
                //     title: '社区医疗咨询服务',
                //     time: '2023-12-25 09:00-17:00',
                //     location: '深圳市南山区社区中心',
                //     participants: 10,
                //     status: '招募中',
                //     statusClass: 'status-recruiting',
                //     image: '/static/volunteer-medical.jpg',
                //     url: 'http://www.dcdxsw.com/shsj/shsjhd/73943.html'
                // }

                {
                    title: '苏科大社会学院开展生命教育社会实践活动',
                    time: '2024-8-13',
                    location: '姑苏区吴门桥街道南环综合为老服务中心',
                    status: '已结束',
                    statusClass: 'status-recruiting',
                    image: '/static/activity1.jpg',
                    url: 'https://article.xuexi.cn/articles/index.html?art_id=2261972266956250039&item_id=2261972266956250039&study_style_id=feeds_opaque&pid=&ptype='
                },
                {
                    title: '感知生命，悦享晚年',
                    time: '2024-7-26',
                    location: '姑苏区吴门桥街道南环综合为老服务中心',
                    status: '已结束',
                    statusClass: 'status-recruiting',
                    image: '/static/activity2.jpg',
                    url: 'http://www.dcdxsw.com/shsj/shsjhd/73943.html'
                },
                {
                    title: '跨代生命教育活动：苏州科技大学志愿者服务社区',
                    time: '2024-7-29',
                    location: '姑苏区吴门桥街道南环综合为老服务中心',
                    status: '已结束',
                    statusClass: 'status-recruiting',
                    image: '/static/activity3.jpg',
                    url: 'https://life.china.com/2024-07/29/content_340773.html'
                },
                {
                    title: '点亮老人心灯，苏州科技大学开展“生命里”调研活动',
                    time: '2024-7-29',
                    location: '姑苏区吴门桥街道南环综合为老服务中心',
                    status: '已结束',
                    statusClass: 'status-recruiting',
                    image: '/static/activity4.jpg',
                    url: 'https://jhd.xhby.net/share-webui/detail/s66a74ceae4b03f2293aa928e'
                },
                {
                    title: '感知生命，悦享晚年           ',
                    time: '2024-7-29',
                    location: '姑苏区吴门桥街道南环综合为老服务中心',
                    status: '已结束',
                    statusClass: 'status-recruiting',
                    image: '/static/activity5.jpg',
                    url: 'https://www.peopleapp.com/rmharticle/30046034434'
                }
            ],
            isLoading: false
        };
    },
    methods: {

        openExternalLink(url) {
        // 在新窗口中打开外部链接
        window.open(url, '_blank');
        },

        goBack() {
            uni.navigateBack();
        },
        navigateToDetail(id) {
            uni.navigateTo({
                url: `/pages/storylibrary/activity/volunteer/detail?id=${id}`
            });
        },
        filterByCategory(category) {
            // 实际应用中这里应该根据分类筛选数据
            uni.showToast({
                title: `已选择${category}分类`,
                icon: 'none'
            });
        },
        handleSortChange(e) {
            const index = e.detail.value;
            this.currentSort = this.sortOptions[index];
            // 实际应用中这里应该根据排序方式重新获取数据
        },
        loadMore() {
            this.isLoading = true;
            // 模拟加载更多数据
            setTimeout(() => {
                this.isLoading = false;
                uni.showToast({
                    title: '没有更多数据了',
                    icon: 'none'
                });
            }, 1500);
        }
    }
};
</script>

<style>
.container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #f5f5f5;
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 90rpx;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
<<<<<<< HEAD
    box-shadow: 0 2rpx 10rpx rgba(121, 119, 119, 0.05);
=======
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
>>>>>>> 73359ff (更新头像)
}

.back-button {
    position: absolute;
    left: 30rpx;
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.back-icon {
    font-size: 40rpx;
    color: #333333;
}

.header-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333333;
}

.content {
    margin-top: 90rpx;
    padding-bottom: 50rpx;
}

.intro-section {
    position: relative;
    width: 100%;
    height: 350rpx;
}

.intro-image {
    width: 100%;
    height: 100%;
}

<<<<<<< HEAD
.intro-overlay1 {
=======
.intro-overlay {
>>>>>>> 73359ff (更新头像)
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
<<<<<<< HEAD
    background: linear-gradient(to bottom, rgb(164, 215, 113), rgba(255, 255, 255, 0.184));
=======
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.6));
>>>>>>> 73359ff (更新头像)
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 30rpx;
}

.intro-title {
    font-size: 48rpx;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 10rpx;
}

.intro-desc {
    font-size: 28rpx;
    color: #ffffff;
    opacity: 0.9;
}

.section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx 30rpx 20rpx;
}

.title-text {
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
}

.category-section {
    background-color: #ffffff;
    padding-bottom: 20rpx;
    margin-bottom: 20rpx;
}

.category-list {
    display: flex;
    flex-wrap: wrap;
    padding: 0 20rpx;
}

.category-item {
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20rpx;
}

.category-icon-container {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10rpx;
}

.category-icon {
    font-size: 40rpx;
}

.category-name {
    font-size: 24rpx;
    color: #666666;
}

.list-title {
    background-color: #ffffff;
    margin-bottom: 0;
    border-bottom: 1rpx solid #f0f0f0;
}

.filter-container {
    display: flex;
}

.filter-button {
    display: flex;
    align-items: center;
    background-color: #f5f5f5;
    padding: 8rpx 20rpx;
    border-radius: 30rpx;
}

.filter-text {
    font-size: 24rpx;
    color: #666666;
    margin-right: 10rpx;
}

.filter-icon {
    font-size: 20rpx;
    color: #999999;
}

.volunteer-list {
    background-color: #ffffff;
    padding: 20rpx;
}

.volunteer-item {
    display: flex;
    border-bottom: 1rpx solid #f0f0f0;
    padding: 20rpx 0;
}

.volunteer-image {
    width: 200rpx;
    height: 200rpx;
    border-radius: 10rpx;
    margin-right: 20rpx;
    flex-shrink: 0;
}

.volunteer-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.volunteer-title {
    font-size: 30rpx;
    font-weight: bold;
    color: #333333;
    margin-bottom: 15rpx;
}

.volunteer-meta {
    margin-bottom: 15rpx;
}

.meta-item {
    display: flex;
    align-items: center;
    margin-bottom: 8rpx;
}

.meta-icon {
    font-size: 24rpx;
    margin-right: 10rpx;
}

.meta-text {
    font-size: 24rpx;
    color: #666666;
}

.volunteer-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.volunteer-status {
    font-size: 22rpx;
    padding: 4rpx 12rpx;
    border-radius: 10rpx;
}

.status-recruiting {
    background-color: #e6f7ff;
    color: #1890ff;
}

.status-upcoming {
    background-color: #fff7e6;
    color: #fa8c16;
}

.volunteer-apply {
    font-size: 26rpx;
    color: #1890ff;
    background-color: #e6f7ff;
    padding: 8rpx 20rpx;
    border-radius: 30rpx;
}

.load-more {
    text-align: center;
    padding: 30rpx 0;
}

.load-more-text {
    font-size: 26rpx;
    color: #999999;
}
</style>

